<template>
  <!--  头部搜索组件-->
  <el-form ref="form" :inline="inline" label-suffix=":" :model="query" size="small">
    <slot></slot>
    <el-form-item>
      <el-button type="primary" @click="$emit('search')" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="handleResetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'search-form',
  props: {
    // form表单是否是inline类型
    inline: {
      type: Boolean,
      default: true,
    },
    // 表单绑定值
    query: {
      type: Object,
      required: true,
    },
    // 重置或者搜索
    searchOnReset: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    // 重置form表单的方法
    handleResetForm() {
      // 重置表单
      this.$refs.form.resetFields();
      if (this.searchOnReset) {
        this.$nextTick(() => {
          // 重置后重新获取数据
          this.$emit('search');
        });
      }
    },
  },
};
</script>
